<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width,initial-scale=1.0" />
    <title>advanced world space</title>
    <link rel="stylesheet" href="light.css" />
  </head>
  <body style="font-family: sans-serif">
    <noscript>
      <strong
        >niivue doesn't work properly without JavaScript enabled. Please enable
        it to continue.</strong
      >
    </noscript>
    <header>
      <label for="radiusSlider">Radius</label>
      <input
        type="range"
        min="0"
        max="20"
        value="0"
        class="slider"
        id="radiusSlider"
      />
      <label for="dxSlider">Mesh clipping</label>
      <input
        type="range"
        min="0"
        max="11"
        value="11"
        class="slider"
        id="dxSlider"
      />
      <input type="checkbox" id="radiologicalCheck" unchecked />
      <label for="radiologicalCheck">Radiological</label>
      <input type="checkbox" id="cornerCheck" unchecked />
      <label for="cornerCheck">Corner text</label>
      <input type="checkbox" id="worldCheck" checked />
      <label for="worldCheck">World space</label>
      <input type="checkbox" id="colorbarCheck" unchecked />
      <label for="colorbarCheck">Colorbar</label>
      <input type="checkbox" id="cubeCheck" unchecked />
      <label for="cubeCheck">Cube</label>
      <input type="checkbox" id="padCheck" unchecked />
      <label for="padCheck">Pad</label>
      <input type="checkbox" id="dpiCheck" checked />
      <label for="dpiCheck">HighDPI</label>
      <input type="checkbox" id="renderCheck" unchecked />
      <label for="renderCheck">Force Render</label>
      &nbsp;
      <label for="dragMode">Drag mode</label>
      <select id="dragMode">
        <option value="contrast">contrast</option>
        <option value="measurement">measurement</option>
        <option value="pan">pan/zoom</option>
        <option value="none">none</option>
      </select>
    </header>
    <main id="container">
      <canvas id="gl1"></canvas>
    </main>
    <footer>
      <label id="shaders">Shaders: </label>
    </footer>

  </body>
</html>
<script type="module" async>
  import * as niivue from "../dist/index.js"
  radiusSlider.oninput = function () {
    nv1.setMeshProperty(nv1.meshes[1].id, "fiberRadius", this.value * 0.1)
    nv1.updateGLVolume()
  }
  dragMode.onchange = function () {
    switch (document.getElementById("dragMode").value) {
      case "none":
        nv1.opts.dragMode = nv1.dragModes.none
        break
      case "contrast":
        nv1.opts.dragMode = nv1.dragModes.contrast
        break
      case "measurement":
        nv1.opts.dragMode = nv1.dragModes.measurement
        break
      case "pan":
        nv1.opts.dragMode = nv1.dragModes.pan
        break
    }
  }
  radiologicalCheck.onchange = function () {
    nv1.setRadiologicalConvention(this.checked)
  }
  cornerCheck.onchange = function () {
    nv1.setCornerOrientationText(this.checked)
  }
  radiologicalCheck.onchange = function () {
    nv1.setSliceMM(this.checked)
  }
  dxSlider.oninput = function () {
    let dx = parseFloat(this.value)
    if (dx > 10) dx = Infinity
    nv1.setMeshThicknessOn2D(dx)
  }
  colorbarCheck.onchange = function () {
    nv1.opts.isColorbar = this.checked
    nv1.drawScene()
  }
  cubeCheck.onchange = function () {
    nv1.opts.isOrientCube = this.checked
    nv1.drawScene()
  }
  padCheck.onchange = function () {
    let pad = 0
    if (this.checked) pad = 5
    nv1.opts.multiplanarPadPixels = pad
    nv1.drawScene()
  }
  dpiCheck.onchange = function () {
    nv1.setHighResolutionCapable(this.checked)
  }
  renderCheck.onchange = function () {
    if (this.checked)
        nv1.opts.multiplanarShowRender = niivue.SHOW_RENDER.ALWAYS
    else
        nv1.opts.multiplanarShowRender = niivue.SHOW_RENDER.AUTO
    nv1.drawScene()
  }
  var volumeList1 = [{url: "../images/mni152.nii.gz"}]
  var nv1 = new niivue.Niivue({
    dragAndDropEnabled: true,
    backColor: [0.3, 0.2, 0.4, 1],
    show3Dcrosshair: true,
  })
  let cmaps = nv1.meshShaderNames()
  let cmapEl = document.getElementById('shaders')
  for (let i = 0; i < cmaps.length; i++) {
    let btn = document.createElement('button')
    btn.innerHTML = cmaps[i]
    btn.onclick = function () {
      nv1.setMeshShader(nv1.meshes[0].id, cmaps[i])
    }
    cmapEl.appendChild(btn)
  }
  nv1.setSliceMM(true)
  await nv1.attachTo("gl1")
  nv1.setClipPlane([-0.1, 180, 50])
  nv1.setRenderAzimuthElevation(245, 15)
  nv1.setHighResolutionCapable(true)
  await nv1.loadVolumes(volumeList1)
  await nv1.loadMeshes([
    {
      url: "../images/BrainMesh_ICBM152.lh.mz3",
      rgba255: [200, 162, 255, 255],
    },
    { url: "../images/dpsv.trx", rgba255: [255, 255, 255, 255] },
  ])
  nv1.setSliceType(nv1.sliceTypeMultiplanar)
</script>